<template>
    <div class="w-full h-full flex-col">
        <div
            class="h-64px w-full box-border py-10px px-30px flex items-center justify-end"
            style="border-bottom: solid 1px #e5e5e5"
        >
            <Xicon name="ai" :size="36" class="cursor-pointer" />
        </div>
        <div class="flex-1 flex-center">
            <div class="w-360px border-solid box-border p-20px rounded-10px flex-col gap-20px">
                <div class="w-full flex items-center box-border gap-20px">
                    <n-avatar round :size="72"></n-avatar>
                    <div>
                        <div class="text-24px">{{ userInfo?.username }}</div>
                        <RegionText
                            v-model="userInfo.location"
                            separator="-"
                            class="font-size-0.75rem"
                        />
                    </div>
                </div>
                <div class="w-full flex-col gap-10px">
                    <div v-for="i in cellMap" :key="i.key" class="w-full flex items-center">
                        <div class="opacity-50 w-100px" style="text-align: justify">
                            {{ i.title }}
                        </div>
                        <div class="flex-1">{{ i.value }}</div>
                    </div>
                </div>
                <div class="w-full flex-center">
                    <n-button type="primary">编辑信息</n-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onActivated, computed } from 'vue'
import Region, { RegionText } from 'v-region'
import type { User } from '@/service/types/user'

onActivated(() => {
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    if (!user) {
        window.NMessage.error('用户信息获取失败')
        return
    }
    user.location = JSON.parse(user.location)
    userInfo.value = user
})

const userInfo = ref<User>({
    id: '',
    account: '',
    username: '',
    password: '',
    phone: '',
    location: {},
    status: 0,
    createTime: 0,
})

const cellMap = computed(() => [
    {
        key: 'account',
        title: '账号',
        value: userInfo.value?.account || '测试账号123456',
    },
    {
        key: 'phone',
        title: '手机号', 
        value: userInfo.value?.phone || '未绑定手机号',
    },
    {
        key: 'status',
        title: '角色',
        value: userInfo.value?.status ? '管理员' : '普通用户',
    },
    {
        key: 'createTime',
        title: '注册时间',
        value: new Date(userInfo.value?.createTime || 0).toLocaleDateString(),
    },
])
</script>

<style scoped></style>
